html {
  font-family: var(--scalar-font);
  font-size: var(--scalar-font-size-4);
}

body.sb-show-main,
:where(#storybook-docs) .sbdocs-wrapper {
  background: var(--scalar-background-1);
}

:where(#storybook-docs) tbody {
  border-radius: var(--scalar-radius);
}

:where(#storybook-docs) tbody tr > * {
  background: var(--scalar-background-2);
  border-color: var(--scalar-border-color) !important;
}

:where(#storybook-docs) th {
  color: var(--scalar-color-2);
}

:where(#storybook-docs) .docblock-argstable {
  color: var(--scalar-color-1);
}
:where(#storybook-docs) tr[title] > *,
:where(#storybook-docs) tr[title] svg {
  background: var(--scalar-background-3) !important;
  color: var(--scalar-color-2);
}

:where(#storybook-docs) tr [title="Required"] {
  color: var(--scalar-text-color-1);
}

:where(#storybook-docs) h1 {
  color: var(--scalar-color-1);
}
:where(#storybook-docs) h2 {
  color: var(--scalar-color-1);
}

:where(#storybook-docs) h3 {
  color: var(--scalar-color-3);
}

:where(#storybook-docs) p,
:where(#storybook-docs) li {
  color: var(--scalar-color-2);
}

:where(#storybook-docs) .sbdocs-preview {
  color: var(--scalar-color-2);
  border-color: var(--scalar-border-color);
  background: var(--scalar-background-2);
}
:where(#storybook-docs) .sbdocs-preview > div:first-of-type:not(.docs-story) {
  background: var(--scalar-background-3);
}

:where(#storybook-docs) td > div > div > span {
  background: var(--scalar-background-3);
  color: var(--scalar-color-2);
  border-color: var(--scalar-border-color);
}

:where(#storybook-docs) .sb-hide {
  display: none;
}

:where(#storybook-root .placeholder) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  text-align: center;
  color: var(--scalar-color-2);
  outline: 1px dashed var(--scalar-color-3);
  outline-offset: -4px;
}
